<template>
  <div>
    <a-modal
      width="1200px"
      v-model:visible="page.show"
      title="编辑今日资产"
      @ok="page.confirm"
      @cancel="page.cancel"
    >
      <a-form
        :model="form.data"
        layout="inline"
        :label-col="form.labelCol"
        :wrapper-col="form.wrapperCol"
      >
        <a-form-item
          style="margin-bottom: 10px"
          v-for="(item, index) in Object.keys(form.data)"
          :key="index"
          :label="form.getPropertyName(item)"
        >
          <a-input
            v-model:value="form.data[item]"
            :disabled="item == 'total'"
            @change="form.getTotal"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
/* eslint-disable */
import defineProps, { reactive } from "vue";
import { PROPERTYS } from "@/constants/constants";
const props = defineProps({
  // 前一天的账单
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["confirm", "cancel"]);
const page = reactive({
  show: true,
  confirm: function () {
    emit("confirm", form.data);
  },
  cancel: function () {
    emit("cancel");
  },
});
const form = reactive({
  labelCol: {
    style: {
      width: "150px",
    },
  },
  wrapperCol: {
    span: 14,
  },
  data: {},
  getAvailable: function () {
    Object.keys(props.data).forEach((ele) => {
      if (ele != "time") {
        form.data[ele] = props.data[ele];
      }
    });
  },
  getTotal: function () {
    form.data.total = 0;
    Object.keys(form.data).forEach((ele) => {
      if (ele != "time" && ele != "total") {
        form.data.total = parseFloat(form.data[ele]) + form.data.total;
      }
    });
    form.data.total = form.data.total.toFixed(2);
  },
  getPropertyName: function (value) {
    let property = PROPERTYS.find((item) => {
      return item.value == value;
    });
    return property ? property.name : value;
  },
});
form.getAvailable();
</script>

<style>
</style>